<template>
  <a-layout id="components-layout-demo-fixed" style="position: relative">
    <a-layout-header class="header flex flex-align-center flex-pack-justify">
      <div class="logo flex">
        <div class="flex flex-align-center">
          <div v-if="systemInfo.logUrl" style="margin-right: 10px">
            <img :src="fileUrl + systemInfo.logUrl.split(';')[0]" class="logo-img" />
          </div>
          <a-dropdown v-if="orgList.length > 1">
            <div @click="(e) => e.preventDefault()" class="flex flex-align-center">
              <span class="sys-name">{{ systemInfo.sysName || systemInfo.orgName + title }}</span>
              <a-icon type="caret-down" style="margin-left: 10px" />
            </div>
            <a-menu slot="overlay" style="max-height: 400px; overflow: auto">
              <a-menu-item @click="changeOrg(item)" v-for="(item, index) in orgList" :key="index">
                <div class="flex flex-align-center">
                  <div
                    v-if="item.logUrl"
                    style="
											height: 30px;
											width: 30px;
											border-radius: 100%;
											overflow: hidden;
											margin-right: 5px;
											background-color: #36B7AB;
										"
                  >
                    <img :src="fileUrl + item.logUrl.split(';')[0]" style="width: 30px" />
                  </div>
                  <div>{{ item.sysName || item.orgName + title }}</div>
                </div>
                <div style="color: #999; font-size: 12px">{{ item.orgName }}</div>
              </a-menu-item>
            </a-menu>
          </a-dropdown>
          <div v-else class="flex flex-align-center">
            <span class="sys-name">{{ systemInfo.sysName || systemInfo.orgName + title }}</span>
          </div>
          <div><span class="sys-name" v-if="userInfo.deptName">——{{ userInfo.deptName }}</span></div>
        </div>
        <div class="mod-name flex flex-align-center">
          <img src="/img/module.png" />
          <span>{{ selectRoute ? selectRoute.meta.title : '首页' }}</span>
        </div>
      </div>
      <div class="right-pro flex flex-align-center">
        <a-space :size="30" style="margin-right: 30px" v-if="false">
          <router-link
            v-if="$_has('dashboard:governmentScreen')"
            to="/dashboard/governmentScreen"
            class="flex flex-align-center"
            style="color: #fff; font-size: 18px"
          >
            <!-- <img src="/count/school.png" alt="" srcset="" style="width: 24px; margin-right: 5px" /> -->
            <span>公卫管理驾驶舱</span></router-link
            >
          <router-link
            v-if="$_has('dashboard:detailsScreen')"
            to="/dashboard/detailsScreen"
            style="color: #fff; font-size: 18px"
            class="flex flex-align-center"
          >
						<!-- <img
							src="/count/platform.png"
							alt=""
							srcset=""
							style="width: 24px; margin-right: 5px"
						/> --><span>个人驾驶舱</span></router-link
					>
          <router-link
            v-if="$_has('dashboard:device')"
            to="/dashboard/device"
            style="color: #fff; font-size: 18px"
            class="flex flex-align-center"
          ><!-- <img src="/count/device.png" alt="" srcset="" style="width: 20px; margin-right: 5px" /> -->
            <span>设备看板</span></router-link
          >
        </a-space>
        <div class="userInfo flex">
          <a-dropdown class="ml50" placement="bottomRight">
            <a href="javascript:;">
              <img v-if="userInfo.avatar" :src="fileUrl + userInfo.avatar.split(';')[0]" class="avatar" />
              <img v-else src="/img/avatar.png" class="avatar" />
              <span class="username">
                {{ userInfo.realName }}
                <a-icon type="down" />
              </span>
            </a>
            <a-menu slot="overlay" class="user-dropdown-menu-wrapper">
              <a-menu-item key="1">
                <router-link to="/userinfo"><span>个人信息</span></router-link>
              </a-menu-item>
              <a-menu-divider />
              <a-menu-item key="4">
                <a href="javascript:;" @click="handleLogout()"><span>退出登录</span></a>
              </a-menu-item>
            </a-menu>
          </a-dropdown>
        </div>
      </div>
    </a-layout-header>
    <a-layout-content style="position: absolute; top: 60px; left: 0; right: 0; bottom: 0">
      <div class="flex flex-v pro-grid-content" style="background-color: #f6f8fb">
        <div style="height: calc(100vh - 60px); overflow: auto; padding-bottom: 35px" class="content">
          <div class="mainWidth" style="margin: 0 auto; transition: all 0.2s ease 0s"><router-view /></div>
        </div>
      </div>
    </a-layout-content>
  </a-layout>
</template>

<script>
import { i18nRender } from '@/locales';
import { mapState, mapActions, mapMutations } from 'vuex';
import defaultSettings from '@/config/defaultSettings';
import RouteView from './RouteView';
import { sysManageapi, upLoginCache } from '@/api/index.js';
export default {
  name: 'HomeLayout',
  components: {
    RouteView
  },
  data () {
    return {
      // preview.pro.antdv.com only use.
      isProPreviewSite: process.env.VUE_APP_PREVIEW === 'true' && process.env.NODE_ENV !== 'development',
      // end
      isDev: process.env.NODE_ENV === 'development' || process.env.VUE_APP_PREVIEW === 'true',

      // base
      menus: [],
      // 侧栏收起状态
      collapsed: false,
      title: defaultSettings.title,
      // userInfo: {},
      fileUrl: process.env.VUE_APP_FILE_API,
      orgList: [], // 该账户所属机构
      selectRoute: null
    };
  },
  computed: {
    ...mapState({
      // 动态主路由
      mainMenu: (state) => state.permission.routers,
      activePage: (state) => state.activePage,
      userInfo: (state) => state.user.userinfo || {},
      systemInfo: (state) => state.globalOrg || {},
      hostname: (state) => state.hostname,
      isPro: (state) => state.isPro
    })
  },
  watch: {
    activePage (newval, oldval) {}
  },
  created () {
    this.getAllMenu();
    this.getUserInfo();
  },
  mounted () {},
  methods: {
    ...mapActions(['Logout', 'GetInfo']),
    ...mapMutations(['SET_GLOBALORG']),
    i18nRender,
    // 获取所有菜单
    getAllMenu () {
      /* 获取路由 */
      this.menus = [...this.mainMenu];
      this.mixTopMenu = this.mainMenu.filter((item) => !item.hidden && item.meta.title != '首页');
      /* 如果没有菜单。提示账户没有权限 */
      if (this.menus.length == 0) {
        this.$message.error('你还没有分配权限，请联系管理员');
      }
    },
    getUserInfo () {
      this.$postAction(this.$api.getUserInfo).then((da) => {
        const data = da.data;
        this.$ls.set('userInfo', data);
        this.GetInfo(data);
        this.getAllOrgList();
      });
    },
    // 获取所有机构
    getAllOrgList () {
      this.$postAction(sysManageapi.orgUrl.getAllList).then((da) => {
        const data = da.data;
        this.orgList = [...da.data];
        /* 如果时运营账户，取账户所在的机构 */
        if (this.userInfo.userType == '06') {
          const info = this.orgList.find((item) => item.orgId == this.userInfo.orgId);
          this.SET_GLOBALORG(info || this.orgList[0]);
        } else {
          // this.systemInfo = this.orgList[0];
          if (!this.systemInfo || Object.keys(this.systemInfo).length == 0) {
            this.SET_GLOBALORG(this.orgList[0]);
          } else {
            const info = this.orgList.find((item) => item.orgId == this.systemInfo.orgId);
            this.SET_GLOBALORG(info || this.orgList[0]);
          }
        }
      });
    },
    // 退出
    handleLogout () {
      const $me = this;
      this.$confirm({
        title: '你确定要退出吗？',
        content: '',
        okText: '确定',
        cancelText: '取消',
        class: 'confirmbox',
        okType: 'danger',
        onOk () {
          /* 退出，清空token就可以 */
          $me.Logout().then(() => {
            // $me.$router.push({
            // 	path: '/user/login'
            // });
            /* 刷新页面，清除tore */
            window.location.reload();
          });
        },
        onCancel () {
          console.log('Cancel');
        }
      });
    },
    navTo () {
      this.$router.push({
        path: '/userinfo'
      });
    },
    /* 切换机构 */
    changeOrg (item) {
      // this.systemInfo = { ...item };
      upLoginCache(item.orgId).then((da) => {
        this.SET_GLOBALORG(item);
      });
    }
  }
};
</script>
<style scoped lang="less">
/deep/.left-menu {
	width: 160px;
	display: inline-block;
	margin: 15px 0;
	overflow: auto;
	ul {
		width: 125px;
		background-color: #fff;
		border-radius: 8px;
		margin-left: 21px;
		padding: 23px 0;
		box-shadow: 0px 4px 8px rgba(19, 29, 53, 0.02);
		li {
			display: inline-block;
			width: 100%;
			text-align: center;
			a {
				display: inline-block;
				color: #2e2424;
				font-size: 16px;
				width: 75px;
				height: 36px;
				line-height: 36px;
				border-radius: 4px;
			}
			a.active {
				// background-color: @primary-color;
				color: #fff;
			}
			& + li {
				margin-top: 10px;
			}
		}
	}
}
/deep/.ant-layout {
	background: transparent !important;
}
.mainWidth {
	width: 1440px;
	//margin: 0 auto;
	@media screen and (max-width: 1680px) {
		width: 1200px;
	}
}
.header {
	position: fixed;
	z-index: 999;
	width: 100%;
	background: @primary-color;
	padding: 0 25px;
	// -webkit-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
	// box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
	ul.navs {
		margin: 0 auto;
		max-width: 1440px;
		height: 60px;
		text-align: center;
		padding-left: 0;
		li {
			float: left;
			display: inline-block;
			height: 100%;
			line-height: 60px;
			text-decoration: none;
			/* border-bottom: 3px solid transparent; */
			color: #fff;
			a {
				display: inline-block;
				height: 100%;
				line-height: 60px;
				padding: 0 20px 0 20px;
				text-decoration: none;
				font-size: 18px;
				// border-bottom: 3px solid transparent;
				color: #fff;
			}
		}
		li a.active {
			//background: #01a8ae;
			background: #5677f5;
			color: #fff;
		}
	}
}

.head-menu {
	// width: 800px;
	text-align: center;
	margin: 0 auto;
	line-height: 64px;
}

.right-pro {
	.re-home {
		color: #fff;
		// margin-left: 88px;
		cursor: pointer;
		img {
			width: 26px;
			height: 23px;
			margin-top: -3px;
		}
		i {
			font-size: 14px !important;
			vertical-align: -0.22em;
		}
		span {
			margin-left: 7px;
		}
	}
	/deep/.userInfo {
		.avatar {
			width: 28px !important;
			height: 28px !important;
			border-radius: 50%;
			// background: #fff;
			// border: 1px solid @primary-color;
			cursor: pointer;
			i {
				// color: @primary-color;
			}
			&.bg {
				//background: url('../assets/images/home/touxiang.jpg') center center no-repeat;
				background-size: 100% auto;
			}
		}
		.username {
			color: #fff;
			margin-left: 10px;
		}
	}
}

/deep/.logo {
	color: #fff;
	.logo-img {
		height: 36px;
		width: auto;
		margin-top: -3px;
	}
	.sys-name {
		color: #fff;
		font-size: 18px;
		margin-left: 7px;
	}
	.mod-name {
		color: #fff;
		margin-left: 88px;
		cursor: pointer;
		img {
			width: 26px;
			height: 23px;
		}
		i {
			font-size: 24px;
			vertical-align: -0.22em;
		}
		span {
			margin-left: 7px;
			font-size: 18px;
		}
	}
}
.ml50 {
	margin-left: 50px;
}
/* 底部样式 */
/deep/.ant-layout-footer {
	padding: 0;
}
</style>
